import React from 'react';

import { Row, Col, Input } from 'antd';
import FormItem from '../../../../components/FormItem';
import { compare } from '../../../../utils/compare';
import Question from '../../../../components/Question';

export default function HitHandleByExpression(props) {
  const expressionValidator = (rule, value, callback) => {
    if (value) {
      const reg = /^[0-9(]([|]{2}|[&]{2}|[0-9()])*$/;
      const endReg = /[0-9)]$/;
      const errReg = /(\(&)|(\(\|)|(&\))|(\|\))|(\)\()|(\d\()|(\)\d)|(&\|)|(\|&)|(\(\))/;
      if (!reg.test(value) || !endReg.test(value) || errReg.test(value)) {
        callback('非法字符，请检查后重新输入');
      } else {
        callback();
      }
      const lReg = /\(/g;
      const rReg = /\)/g;
      const lArr = value.match(lReg) || [];
      const rArr = value.match(rReg) || [];
      if (lArr.length !== rArr.length) {
        callback('非法字符，请检查后重新输入');
      } else {
        callback();
      }
    } else {
      callback();
    }
  };
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const formItems = [
    {
      label: {
        label: '条件表达式',
        ...layout,
      },
      name: `condition_express`,
      options: {
        initialValue: props.value || '',
        rules: [
          { required: true, message: '请输入' },
          {
            validator: expressionValidator,
          },
        ],
      },
      component: (
        <Input placeholder='规则序号&&规则序号||规则序号，如1&&2||3' disabled={props.disabled} style={compare(props)} />
      ),
      after: (
        <Question
          title={
            <div>
              <p>1.每个条件都有一个 Bool 值，管理员可以通过自定义的表达式进行组合，并根据组合结果，来设置动作；</p>
              <p>2.条件之间且关系用“&&”标识，或关系用“||”标识；</p>
              <p>3.表达式只允许输入条件序号代表各条件；</p>
              <p>4.表达式支持输入英文括号“()”来标识执行顺序</p>
            </div>
          }
        />
      ),
    },
  ];
  return (
    <Row type='flex' gutter={20} style={{ marginTop: '20px' }}>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
